<template>
  <div class="statistics">
    <DashHeader />
    <el-main>
      <el-card class="introduce">
        <div class="order">
          <el-card class="order-item">
            <template #header>
              <div class="card-header">
                <span>今日执行次数</span>
              </div>
            </template>
            <div class="item">{{ planstotal }}次</div>
          </el-card>
          <el-card class="order-item">
            <template #header>
              <div class="card-header">
                <span>今日执行时间</span>
              </div>
            </template>
            <div class="item">{{ execttime }}秒</div>
          </el-card>
          <el-card class="order-item">
            <template #header>
              <div class="card-header">
                <span>自动化覆盖率</span>
              </div>
            </template>
            <div class="item">80%</div>
          </el-card>
        </div>
      </el-card>

      <el-card class="introduce">
        <div class="order">
          <el-card class="order-item">
            <template #header>
              <div class="card-header">
                <span>执行次数统计</span>
              </div>
            </template>
            <div
              class="item-chart"
              id="main1"
              style="width: 100%; height: 300px;"
            ></div>
          </el-card>
          <el-card class="order-item">
            <template #header>
              <div class="card-header">
                <span>执行时间统计</span>
              </div>
            </template>
            <div
              class="item-chart"
              id="main2"
              style="width: 100%; height: 300px;"
            ></div>
          </el-card>
        </div>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import DashHeader from "@/components/DashHeader";
import * as echarts from "echarts";

export default {
  name: "Statistics",
  components: {
    DashHeader,
  },
  data() {
    return {
      planstotal: 0,
      execttime: 0,
      dates: [],
      planstotals: [],
      execttimes: [],
    };
  },
  methods: {
    getTodayInfo() {
      this.$http.get("/api/v1/statistics/record").then((resp) => {
        var tmpdata = resp.data;
        console.log(tmpdata);
        this.planstotal = tmpdata.PlansTotal;
        this.execttime = tmpdata.ExectTimes;
      });
    },

    async getlist() {
      await this.$http.get("/api/v1/statistics/recordlist").then((resp) => {
        var tmpdata = resp.data;
        const nn = tmpdata.length;
        console.log(tmpdata);
        for (var i = 0; i < nn; i++) {
          this.dates.push(tmpdata[i].Date);
          this.planstotals.push(tmpdata[i].PlansTotal);
          this.execttimes.push(tmpdata[i].ExectTimes);
        }
        console.log(this.dates);
      });
    },

    echartInit() {
      console.log("在echarttttttt");
      console.log("zzzzzz", this.dates);
      console.log("zzzzzz", this.execttimes);
      console.log("zzzzzz", this.planstotals);
      
      this.myChart1 = echarts.init(document.getElementById("main1"));
      this.myChart2 = echarts.init(document.getElementById("main2"));
      // 指定图表的配置项和数据
      var option1 = {
        xAxis: {
          type: "category",
          data: this.dates,
        },
        yAxis: {
          type: "value",
          name: "单位（次）",
          nameTextStyle: {
            color: "#aaa",
            nameLocation: "start",
          },
        },
        series: [
          {
            data: this.planstotals,
            type: "line",
            lineStyle: {
              normal: {
                width: 2, //连线粗细
                color: "#409EFF", //连线颜色
              },
            },
          },
        ],
      };
      var option2 = {
        xAxis: {
          type: "category",
          data: this.dates,
        },
        yAxis: {
          type: "value",
          name: "单位（秒）",
          nameTextStyle: {
            color: "#aaa",
            nameLocation: "start",
          },
        },
        series: [
          {
            data: this.execttimes,
            type: "line",
            lineStyle: {
              normal: {
                width: 2, //连线粗细
                color: "#409EFF", //连线颜色
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart1.setOption(option1);
      this.myChart2.setOption(option2);
    },
  },
  async mounted() {
    this.getTodayInfo();
    await this.getlist();
    await this.echartInit();
  },
 unmounted() {
    echarts.dispose(this.myChart1);
    echarts.dispose(this.myChart2);
  }
};
</script>

<style scoped>
.introduce .order {
  display: flex;
  margin-bottom: 50px;
}
.introduce .order .order-item {
  flex: 1;
  margin-right: 20px;
}
.introduce .order .order-item:last-child {
  margin-right: 0;
}

.zoom {
  min-height: 300px;
}
</style>
